<template>
  <div class="container"  @click="changeShow">
    <div class="wrapper">
      <swiper :options="swiperOption">
        <!-- slides -->
        <swiper-slide v-for="(imglist,index) of imgs" :key="index">
          <img class="wrapper-img" :src="imglist">
        </swiper-slide>
        <!-- Optional controls -->
        <div class="swiper-pagination"  slot="pagination"></div>
      </swiper>
    </div>
  </div>
</template>

<script>
    export default {
      name: "CommonBanner",
      props:{
        imgs:{
          type:Array,
          default (){
            return []
          }
        }
      },
      methods:{
        changeShow (){
          this.$emit('changeShowClose')
        }
      },
      data (){
        return {
          swiperOption:{
            pagination:'.swiper-pagination',
            paginationType:'fraction',
            loop:true,
            observer:true,
            observeParents:true
          }
        }
      }
    }
</script>

<style scoped lang="stylus">
  .container >>>.swiper-container{overflow: inherit}
  .container{ position: fixed;top:0;left:0;right: 0;bottom: 0;background: #000;display: flex;flex-direction: column;
  justify-content: center;z-index: 3;
  }
  .wrapper{ width: 100%;height: 0;padding-bottom: 80%;}
  .wrapper-img{ width: 100%}
  .swiper-pagination{ color: #fff;position: absolute;top:-1rem}
</style>
